<template>
    <div>
      <h2>Child Component</h2>
      <!-- 子组件的 input，绑定到 childMessage -->
      <input v-model="childMessage" placeholder="Enter Child Message"/>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      // 通过 v-model :childMessage 绑定的数据
      modelValue: {
        type: String,
        required: true,
      },
    },
    computed: {
      // 实现双向绑定，将 modelValue 和 childMessage 连接起来
      childMessage: {
        get() {
          return this.modelValue; // 从父组件接收的数据
        },
        set(value) {
          this.$emit("update:modelValue", value); // 通知父组件更新数据
        },
      },
    },
  };
  </script>
  
  <style scoped>
  h2 {
    margin-bottom: 0.5em;
  }
  </style>
  